<template>
  <div class="hospital">
    <el-card class="box-card">
      <div class="boxcard-head">
        <el-form :model="queryParam" ref="queryParam" inline class="demo-form-inline">
          <el-form-item label="名称:" label-width="100px" prop="name">
            <el-input v-model="queryParam.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" label-width="100px" prop="contractTel">
            <el-input v-model="queryParam.contractTel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList()">搜索</el-button>
            <el-button @click="resetForm('queryParam')">重置</el-button>
            <el-button icon="el-icon-plus" type="primary" @click="dialogAdd()">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="boxcard-body">
        <el-table
          :data="list"
          style="width: 100%;"
          row-key="id"
          :header-cell-style="{ 'background-color': '#EEEEEE' }"
        >
          <el-table-column type="index" label="排序" width="60"></el-table-column>
          <el-table-column prop="name" label="医院名称" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="hlevel" label="医院等级" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag>{{ getHospitalLevel(scope.row.hlevel) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300" show-overflow-tooltip></el-table-column>
          <el-table-column prop="contracts" label="联系人" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="contractTel" label="联系电话" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="状态" width="150" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.status === 1 ? '正常合作' : '终止合作' }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="dialogField(scope.row)" type="text" size="small">编辑</el-button>
              <el-button
                @click="changeStatus(scope.row)"
                type="text"
                size="small"
              >{{ scope.row.status === 1 ? '终止合作' : '正常合作' }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :total="total"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 弹窗 -->
    <div>
      <el-dialog
        :title="editName"
        :visible.sync="dialogFieldBox"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <el-form
          :model="hospital"
          :rules="rules"
          label-position="right"
          label-width="100px"
          ref="form"
        >
          <el-form-item label="医院图片" prop="imageUrl">
            <singleImgUpload :url.sync="hospital.imageUrl" dir="hospital"></singleImgUpload>
          </el-form-item>
          <div class="formItem">
            <el-form-item style="flex: 1;" label="名称" prop="name">
              <el-input v-model="hospital.name" />
            </el-form-item>
            <el-form-item style="flex: 1;" label="联系人" prop="contracts">
              <el-input v-model="hospital.contracts" />
            </el-form-item>
          </div>
          <div class="formItem">
            <el-form-item style="flex: 1;" label="注册日期" prop="registerDate">
              <el-date-picker
                v-model="hospital.registerDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item style="flex: 1;" label="地址" prop="address">
              <el-input v-model="hospital.address" />
            </el-form-item>
          </div>
          <div class="formItem">
            <el-form-item style="flex: 1;" label="联系电话" prop="contractTel">
              <el-input v-model="hospital.contractTel" />
            </el-form-item>
            <el-form-item style="flex: 1;" label="医院等级" prop="hlevel">
              <el-select v-model="hospital.hlevel" placeholder="请选择">
                <el-option
                  v-for="item in hospitalLevel"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="formItem">
            <el-form-item style="flex: 1;" label="医院科室" prop="departmentIds">
              <el-select v-model="hospital.departmentIds" multiple placeholder="请选择">
                <el-option
                  v-for="item in hospitalDepartment"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="flex: 1;" label="医院职称" prop="postIds">
              <el-select v-model="hospital.postIds" multiple placeholder="请选择">
                <el-option
                  v-for="item in hospitalTitle"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="介绍" prop="memo">
            <el-input type="textarea" :rows="3" v-model="hospital.memo" />
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
import singleImgUpload from "../../components/upload/SingleImgUpload.vue";

export default {
  components: { singleImgUpload },
  data() {
    return {
      queryParam: {
        name: null,
        contractTel: null
      },
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      // 弹窗相关属性
      editName: "编辑",
      dialogFieldBox: false,
      // 弹窗数据
      hospital: {
        id: null,
        name: null,
        address: null,
        imageUrl: null,
        memo: null,
        hlevel: null,
        contracts: null,
        contractTel: null,
        registerDate: null,
        departmentIds: [],
        postIds: []
      },
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: "医院名称不能为空",
            trigger: "blur"
          }
        ]
      },
      // 数据字典
      hospitalDepartment: [],
      hospitalTitle: [],
      hospitalLevel: []
    };
  },
  created() {
    this.ininDict();
    this.getList(this.pageNum, this.pageSize);
  },
  watch: {
    // dialogFieldBox: {
    // 	handler() {
    // 		if (!this.dialogFieldBox) {
    // 			this.hospital.imageUrl = '';
    // 		}
    // 	},
    // 	immediate: true
    // }
  },
  methods: {
    async ininDict() {
      await get("dict/hospitalDepartment").then(res => {
        this.hospitalDepartment = res.data.data;
      });
      await get("dict/hospitalTitle").then(res => {
        this.hospitalTitle = res.data.data;
      });
      await get("dict/hospitalLevel").then(res => {
        this.hospitalLevel = res.data.data;
      });
    },
    getHospitalLevel(value) {
      if (value) {
        for (let i = 0; i < this.hospitalLevel.length; i++) {
          if (this.hospitalLevel[i].key === value) {
            return this.hospitalLevel[i].label;
          }
        }
      }
      return "";
    },
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      this.$https.get("/hospital/pageHospital", {
        pageNum: this.pageNum,
		pageSize: this.pageSize,
		name:this.queryParam.name,
		contractTel:this.queryParam.contractTel
      }).then(res => {
        this.list = res.data.data.list;
        // 自定义下标
        this.list.forEach((e, idx) => {
          e.idx = (idx + 1) * this.pageNum;
        });
        this.total = Number.parseInt(res.data.data.total);
        this.pageNum = res.data.data.pageNum;
      });
    },
    changeStatus(row) {
      let url = "/hospital/stopHospital";
      if (row.status === 2) {
        url = "/hospital/normalHospital";
      }
      postXform(url, { id: row.id }).then(res => {
        this.$message({ message: "操作成功", type: "success" });
        this.getList();
      });
    },
    resetFormData() {
      return {
        id: null,
        name: null,
        address: null,
        imageUrl: null,
        memo: null,
        hlevel: null,
        contracts: null,
        contractTel: null,
        registerDate: null,
        departmentIds: [],
        postIds: []
      };
	},
	resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "queryParam") {
        this.getList();
      }
    },
    dialogAdd() {
      this.editName = "新增";
      this.dialogFieldBox = true;
      this.hospital = this.resetFormData();
    },
    // 编辑按钮打开编辑字段弹窗
    dialogField(e) {
      get("hospital/getHospitalDetail", { id: e.id }).then(res => {
        let data = res.data.data;
        this.editName = "编辑";
        this.dialogFieldBox = true;
        this.hospital = {
          id: data.id,
          name: data.name,
          address: data.address,
          imageUrl: data.imageUrl,
          memo: data.memo,
          hlevel: data.hlevel,
          contracts: data.contracts,
          contractTel: data.contractTel,
          registerDate: data.registerDate,
          departmentIds: data.departmentIds,
          postIds: data.postIds
        };
      });
    },
    // 确认保存
    confirmClick() {
      const vm = this;
      let param = { ...this.hospital };
      this.$refs.form.validate(valid => {
        if (valid) {
          let reqUel = "/hospital/addHospital";
          if (this.hospital.id) {
            reqUel = "/hospital/updateHospital";
          }
          postJson(reqUel, param).then(res => {
            this.$message({ message: "操作成功", type: "success" });
            this.dialogFieldBox = false;
            this.getList();
            this.hospital = this.resetFormData();
          });
        } else {
          return false;
        }
      });
    },
    cancelClick() {
      this.dialogFieldBox = false;
      this.$refs.form.clearValidate();
      this.hospital = this.resetFormData();
    }
  }
};
</script>

<style lang="less"></style>
